<template>
  <div class="box">
    <div class="header">
      <div class="interviewBook">面试宝典</div>
      <van-dropdown-menu>
        <van-dropdown-item :title="city" @click="show">
          <van-index-bar style="text-align: left">
            <template v-for="(value, key) in citys">
              <van-index-anchor
                style="background-color: #eee"
                :index="key"
                :key="key"
              />
              <van-cell
                @click="getCity(item)"
                :title="item"
                v-for="(item, index) in value"
                :key="index"
              />
            </template>
          </van-index-bar>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
    <div class="tag">
      <van-button
        @click="tagStyle(index)"
        :class="{ active: active == index }"
        v-for="(item, index) in tagsList"
        :key="item.index"
        round
        size="small"
        >{{ item }}</van-button
      >
    </div>
    <!-- 顺序刷题 -->
    <div class="order">
      <div class="item error">
        <div class="bgcolor">
          <i class="iconfont iconicon_mine_cuoti"></i>
        </div>
        常错题库
      </div>
      <div class="item collect">
        <div class="bgcolor">
          <i class="iconfont iconicon_mine_tikushoucang"></i>
        </div>
        收藏题库
      </div>
      <div @click="$router.push('/company')" class="item company">
        <div class="bgcolor">
          <i class="iconfont iconicon_mine_qiyeshoucang"></i>
        </div>
        企业题库
      </div>
      <div class="item answer">
        <div class="bgcolor">
          <i class="iconfont iconicon_mine_mianjing"></i>
        </div>
        已答题库
      </div>
      <van-circle
        class="circle"
        v-model="currentRate"
        color="#ef2e5c"
        :rate="70"
        :speed="100"
        size="120px"
      />
      <div class="item orderQuestion">
        <h2 style="color: #fff; margin-top: 20px">顺序刷题</h2>
        <span style="color: #fff; font-size: 16px">62/126</span>
      </div>
    </div>
    <div class="record" style="margin-bottom: 30px">
      <h2 style="margin-top: 20px">累计记录</h2>
      <span style="font-size: 25px">{{ totalCount }}</span>
    </div>
    <van-button @click="startInterview" class="questionBtn" size="large"
      >模拟面试</van-button
    >
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { interviewAPI, getInterviewAPI } from '@/api/question'
// import { getToken } from '@/utils/storage'
export default {
  name: 'QuestionModule',
  data () {
    return {
      currentRate: 10,
      wordList: ['A', 'B', 'C', 'D'],
      cityPositions: {},
      totalCount: '' || 126,
      tagsList: ['服务端', '测试', '前端', '行政', '移动端', '架构'],
      active: 0,
      city: '全国',
      showDropdown: true,
      type: 355,
      citys: {}
    }
  },
  computed: {
    ...mapState(['userInfo'])
  },
  created () {
    this.interview()
    console.log(this.userInfo)
  },
  methods: {
    show () {
      this.showDropdown = true
    },
    getCity (item) {
      this.city = item
      this.showDropdown = false
    },
    ...mapMutations(['SETQUESTION']),
    tagStyle (index) {
      this.active = index
      console.log('this.active:', this.active)
      if (this.active === 0) {
        this.type = 355
      }
      if (this.active === 1) {
        this.type = 361
      }
      if (this.active === 2) {
        this.type = 354
      }
      if (this.active === 3) {
        this.type = 360
      }
      if (this.active === 4) {
        this.type = 358
      }
      if (this.active === 5) {
        this.type = 363
      }
    },
    async interview () {
      const res = await interviewAPI()
      // console.log('城市', res)
      this.citys = res.data.citys
      this.cityPositions = res.data.cityPositions
      this.totalCount = res.data.totalCount
      console.log('citys', this.citys)
      // console.log('cityPositions', this.cityPositions)
      // console.log(this.citys)
    },
    async startInterview () {
      const res = await getInterviewAPI({
        type: this.type,
        city: this.city
      })
      this.SETQUESTION(res.data)
      this.$router.push('interview')
      console.log('面试题', res)
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  .header {
    display: flex;
    width: 100%;
    height: 50px;
    ::v-deep .van-dropdown-menu__bar {
      box-shadow: none;
    }
    ::v-deep .van-ellipsis {
      font-size: 12px;
    }
    .interviewBook {
      height: 100%;
      line-height: 50px;
      margin-left: 35%;
    }
    .cho0seCity {
      height: 100%;
      line-height: 50px;
      font-size: 12px;
      margin-left: 3px;
    }
  }
  .tag {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 45px;
    background-color: #fff;

    .active {
      background-color: #00c7dd;
    }
  }
  .order {
    position: relative;
    margin-top: 15px;
    width: 100%;
    height: 200px;
    // background-color: skyblue;
    .item {
      position: absolute;
      font-size: 12px;
    }
    .bgcolor {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      line-height: 65px;
      .iconfont {
        font-size: 30px;
        line-height: 100%;
      }
    }
    .error {
      top: 15px;
      left: 15px;
      .bgcolor {
        background-color: #ff6060;
      }
    }
    .collect {
      top: 15px;
      right: 15px;
      .bgcolor {
        background-color: #ffc003;
      }
    }
    .company {
      bottom: 15px;
      left: 15px;
      .bgcolor {
        background-color: #00c7dd;
      }
    }
    .answer {
      bottom: 15px;
      right: 15px;
      .bgcolor {
        background-color: #26d089;
      }
    }
    .orderQuestion {
      top: 50%;
      left: 50%;
      width: 100px;
      height: 100px;
      background-color: #ef2e5c;
      transform: translate(-50%, -50%);
      border-radius: 50%;
    }
    .circle {
      position: absolute;
      top: 20%;
      left: 34%;
    }
  }
  .record {
    width: 100%;
    height: 130px;
  }
  .questionBtn {
    width: 95%;
    border-radius: 5px;
    background-color: #00b8d4;
    color: #fff;
  }
}
</style>
